<template>
  <div class="sidebar">
    <div v-for="featured in featuredsList" class="widget widget_ui_textasb">
      <router-link class="style02" :title="featured.title" :to="{ name: 'Post', params: { postId: featured.id }}">
      <strong>吐血推荐</strong>
        <h2>{{ featured.title }}</h2>
        <p>
          {{ featured.summary }}
        </p>
      </router-link>
    </div>

    <div class="widget widget_ui_posts"><h3>热门文章</h3>
      <ul>
        <li v-for="hot in hotsList">
          <router-link :title="hot.title" :to="{ name: 'Post', params: { postId: hot.id }}">
            {{ hot.title }}
          </router-link>
        </li>
      </ul>
    </div>
    <div class="widget widget_ui_tags"><h3>热门标签</h3>
      <div class="items">
        <router-link  v-for="tag in tagList" :key="tag.id" :to="{ name: 'Tag', params: { tagName: tag.name }}">{{ tag.name }} ({{ tag.count }})</router-link>
      </div>
    </div>
  </div>
</template>

<script>
  import {getList} from '../api/tag'
  import {hotsN, featuredsN} from '../api/post'
  export default {
    name: "my-aside",
    data() {
      return {
        tagList:[],
        featuredsList: {},
        hotsList:[]
      }
    },methods: {
      listAllTag() {
        getList().then(res => {
          this.tagList = res.data
        })
      },
      getHotsN() {
        hotsN(5).then(res => {
          this.hotsList = res.data
        })
      },
      getFeatured() {
        featuredsN(1).then(res => {
          this.featuredsList = res.data
        })
      }
    },
    created() {
      this.listAllTag()
      this.getHotsN()
      this.getFeatured()
    }
  }
</script>

<style scoped>

</style>
